<template>
  <div>
    <!-- 工作日历, 年和月 -->
    <div class="select-box">
      <!-- 改变年份, 月份, 日历都要更新 => 注册change事件 -->
      <el-select v-model="currentYear" size="small" style="width: 120px; margin-right: 10px" @change="change">
        <!-- 年份取给定年份的, 前五年 + 后五年 -->
        <el-option
          v-for="item in yearList"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <!-- 改变年份, 月份, 日历都要更新 => 注册change事件 -->
      <el-select v-model="currentMonth" size="small" style="width: 120px;" @change="change">
        <!-- 直接遍历数字 -->
        <el-option
          v-for="item in 12"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </div>
    <el-calendar v-model="current">
      <!-- date 每天的时间  Sun Jul 04 2021 08:00:00 GMT+0800 (中国标准时间)  -->
      <!--
        data {
            "isSelected": true,是否选中
            "type": "current-month",当前月，如果是上个月显示prev-month,下个月显示next-month
            "day": "2021-07-04"今天的日期
        }
      -->
      <template v-slot:dateCell="{ date,data }">
        <div class="date-content">
          <!-- 如果当前日期的isSelected是true就添加上current这个类名 -->
          <span class="text" :class="{ current: data.isSelected }">{{ date.getDate() }}</span>
          <span v-if="showRest(date)" class="rest">休</span>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: 'WorkCalendar',
  data() {
    return {
      // 当前年
      currentYear: new Date().getFullYear(),
      // 当前月 月份是0-11，需要加一
      currentMonth: new Date().getMonth() + 1,
      // 日历当前时间
      current: new Date()
    }
  },
  computed: {
    yearList() {
      // const list = []
      // for (let i = this.currentYear - 5; i <= this.currentYear + 5; i++) {
      //   list.push(i)
      // }
      // return list
      // 当前年的前五前和后五年
      return Array.from(new Array(11), (item, index) => this.currentYear + index - 5) // 如果指定了第二个参数，新数组中的每个元素会执行该回调函数
      // new Array有12个，0-11，全部都是undefined，第二给参数给函数，拿着当前年+下标-5就可以得到前五年和后五年
    }
  },
  watch: {
    // 监听当前日期的变化
    current: {
      // 深度监听
      deep: true,
      // 值发生变化就会执行这个函数，第一个参数是新值，第二个参数是旧值
      handler(value) {
        // 点击日历，日历变化触发这个函数，value拿到最新的值，获取这个值的年份和月份赋值给绑定的currentYear和currentMonth
        this.currentYear = value.getFullYear()
        this.currentMonth = value.getMonth() + 1
      }
    }
  },
  methods: {
    change() {
      // 切换上面的年份和月份，new 一个新的Date 值就是当前选中的年和月，月份要减一，因为new Date()本身月份就是0-11，我们为了符合我们的时间月份加了一，但是传值给new Date还是要变回0-11这种格式，所以要在我们之前加一的基础上减一
      this.current = new Date(this.currentYear, this.currentMonth - 1)
    },
    // 是否显示休息
    showRest(date) {
      // 当天日期.getDay()可以获取到0-6 0是星期天
      const day = date.getDay()
      // 如果等于星期六或者星期天就返回true，因为是v-if所以需要Boolean值
      if (day === 0 || day === 6) {
        return true
      } else {
        // 否者返回false，不是星期六或者星期天就返回false不显示休息
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.select-box {
  display: flex;
  justify-content: flex-end;
}
// 隐藏日历的头部
::v-deep{
  .el-calendar__header{
    display: none;
  }
}

::v-deep .el-calendar-day {
  height:  auto;
 }
.date-content {
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
.date-content .rest {
  color: #fff;
  border-radius: 50%;
  background: rgb(250, 124, 77);
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
}
.date-content .text{
  width: 20px;
  height: 20px;
  line-height: 20px;
 display: inline-block;

}
.current{
   background: #409eff;
   color: #fff;
   border-radius: 50%;
 }
</style>
